<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="14"><div>
        <zh-card title="表达式" body-style	="padding:0px;height:180px">
          <zh-input id="elInput" type="textarea" :rows="8" v-model="state.elExpression"></zh-input>
        </zh-card>
      </div></el-col>
      <el-col :span="10">
        <zh-card title="运算符" body-style	="height:180px">
          <el-row :gutter="24">
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('+')">+</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('-')">-</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('*')">*</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('/')">/</zh-button></el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('>')">&gt;</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('<')">&lt;</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('(')">(</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit(')')">)</zh-button></el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('=')">=</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('AND')">AND</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('OR')">OR</zh-button></el-col>
            <el-col :span="6"><zh-button class="counterButton" @click="shortEdit('NOT')">NOT</zh-button></el-col>
          </el-row>
        </zh-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:5px">
      <el-col :span="8">
        <zh-card title="接口选择" body-style	="height:260px">
          <el-scrollbar height="260px">
            <zh-list :dataSource="state.apiDict">
              <template #renderItem="{ item }">
                  <a-list-item @click="apiItemClick(item)" :style="item.selected?'background:rgba(64,158,255,0.1);':''">
                    {{item.dictValue}}({{item.dictKey}})
                  </a-list-item>
              </template>
            </zh-list>
          </el-scrollbar>
        </zh-card>
      </el-col>
      <el-col :span="6">
        <zh-card title="所属类型选择" body-style	="height:260px">
          <el-scrollbar height="260px">
            <zh-list :dataSource="state.paramFormDict">
              <template #renderItem="{ item }">
                <a-list-item @click="paramFormItemClick(item)" :style="item.selected?'background:rgba(64,158,255,0.1);':''">
                  {{item.dictValue}}({{item.dictKey}})
                </a-list-item>
              </template>
            </zh-list>
          </el-scrollbar>
        </zh-card>
      </el-col>
      <el-col :span="10">
        <zh-card title="字段选择" body-style	="height:260px">
          <el-scrollbar height="260px">
            <zh-tree
                ref="apiTreeRef"
                :data="state.treeList"
                :expand-on-click-node="false"
                :lazy="false"
                node-key="paramKey"
                :draggable="true"
                :props="{ label: 'title' }"
                @node-click="onNodeClick"
            ></zh-tree>
          </el-scrollbar>
        </zh-card>
      </el-col>
    </el-row>

  </div>
</template>

<script lang="ts" setup name="ElExpression">


//-----------定义参数-----------------
const state = reactive({
  elExpression:'',
  apiDict:[],
  paramFormDict:[
    {dictKey:"header",dictValue:"请求头数据"},
    {dictKey:"params",dictValue:"请求参数数据"},
    {dictKey:"body",dictValue:"请求体数据"},
    {dictKey:"res",dictValue:"返回数据"},
  ],
  treeList:[],
});


onMounted(() => {
  state.apiDict=$store.serviceFlow.funcCodeMap;
})

function apiItemClick(item){
  item.selected=true;
  for(let i=0;i<state.apiDict.length;i++){
    if(state.apiDict[i].dictKey!=item.dictKey){
      state.apiDict[i].selected=false
    }
  }
  getParamTree();
}

function paramFormItemClick(item){
  item.selected=true;
  for(let i=0;i<state.paramFormDict.length;i++){
    if(state.paramFormDict[i].dictKey!=item.dictKey){
      state.paramFormDict[i].selected=false
    }
  }
  getParamTree();
}

function getParamTree(){
  let funcCode='';
  let paramType='';
  let paramFrom='';

  for(let i=0;i<state.apiDict.length;i++){
    if(state.apiDict[i].selected){
      funcCode=state.apiDict[i].dictKey
    }
  }

  for(let i=0;i<state.paramFormDict.length;i++){
    if(state.paramFormDict[i].selected){
      paramFrom=state.paramFormDict[i].dictKey
    }
  }

  if(funcCode!=''&&paramFrom!=''){
    if(paramFrom=='res'){
      paramType='res';
      paramFrom='body';
    }else{
      paramType='req';
    }

    $api.common.send.post('APIPARAMS0007', {functionCode:funcCode,paramType:paramType,paramFrom:paramFrom}).then((res) => {
      state.treeList = res.result.treeList;
    });
  }
}

function onNodeClick(node){
  //state.elExpression=state.elExpression+'${'+node.value+'}';
  let val='${'+node.value+'#'+node.key+'}';
  shortEdit(val)
}

function shortEdit(val){
  let contentDom = document.getElementById("elInput");
  // 获取光标选区的起始下标
  let startPos = contentDom.selectionStart;
  // 获取光标选区的结束下标
  let endPos = contentDom.selectionEnd;
  let oldContent = contentDom.value;
  // 用快捷编辑的内容替换光标选区中的内容
  let newContent =
      oldContent.substring(0, startPos) +val+ oldContent.substring(endPos);
  contentDom.value = newContent;
  state.elExpression=newContent;
      // 让输入框重新获得焦点
  contentDom.focus();
  // 替换内容后，新的光标选区的起始下标
  let newStartPos = startPos + val.length;
  // 设置新的光标位置（无选区时，起始下标 = 结束下标）
  contentDom.setSelectionRange(newStartPos, newStartPos);
}

function  getElExpression(){

  return state.elExpression
}

function  setElExpression(value){
  state.elExpression=value;
}

defineExpose({ getElExpression,setElExpression});

</script>

<style scoped>
  .counterButton{
    margin:5px;
    width:50px;
    height: 30px
  }

</style>